﻿<MTimeline Dense="false">
    <MTimelineItem Color="purple lighten-2"
                     FillDot
                     Right>
        <MCard>
            <MCardTitle Class="purple lighten-2">
                <MIcon Dark
                        Size="42"
                        Class="mr-4">
                    mdi-magnify
                </MIcon>
                <h2 class="text-h4 white--text font-weight-light">
                    Title 1
                </h2>
            </MCardTitle>
            <MContainer>
                <MRow>
                    <MCol Cols="12"
                           Md="10">
                        Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
                    </MCol>
                    <MCol Class="hidden-sm-and-down text-right"
                           Md="2">
                        <MIcon Size="42">
                            mdi-calendar-text
                        </MIcon>
                    </MCol>
                </MRow>
            </MContainer>
        </MCard>
    </MTimelineItem>

    <MTimelineItem Color="amber lighten-1"
                     FillDot
                     Left
                     Small>
        <MCard>
            <MCardTitle Class="amber lighten-1 justify-end">
                <h2 class="text-h4 mr-4 white--text font-weight-light">
                    Title 2
                </h2>
                <MIcon Dark
                        Size="42">
                    mdi-home-outline
                </MIcon>
            </MCardTitle>
            <MContainer>
                <MRow>
                    <MCol Cols="12"
                           Md="8">
                        Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
                    </MCol>
                    <MCol Cols="12"
                           Md="4">
                        Lorem ipsum dolor sit amet, no nam oblique veritus.
                    </MCol>
                </MRow>
            </MContainer>
        </MCard>
    </MTimelineItem>

    <MTimelineItem Color="cyan lighten-1"
                     FillDot
                     Right>
        <MCard>
            <MCardTitle Class="cyan lighten-1">
                <MIcon Class="mr-4"
                        Dark
                        Size="42">
                    mdi-email-outline
                </MIcon>
                <h2 class="text-h4 white--text font-weight-light">
                    Title 3
                </h2>
            </MCardTitle>
            <MContainer>
                <MRow>
                    @for (int i = 0; i < 3; i++)
                    {
                        <MCol Cols="12"
                              Md="4">
                            Lorem ipsum dolor sit amet, no nam oblique veritus no nam oblique.
                        </MCol>
                    }
                </MRow>
            </MContainer>
        </MCard>
    </MTimelineItem>

    <MTimelineItem Color="red lighten-1"
                     FillDot
                     Left
                     Small>
        <MCard>
            <MCardTitle Class="red lighten-1 justify-end">
                <h2 class="text-h4 mr-4 white--text font-weight-light">
                    Title 4
                </h2>
                <MIcon Dark
                        Size="42">
                    mdi-account-multiple-outline
                </MIcon>
            </MCardTitle>
            <MContainer>
                <MRow>
                    <MCol Class="hidden-sm-and-down"
                           Md="2">
                        <MIcon Size="42">
                            mdi-server-network
                        </MIcon>
                    </MCol>
                    <MCol Cols="12"
                           Md="10">
                        Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus.
                    </MCol>
                </MRow>
            </MContainer>
        </MCard>
    </MTimelineItem>

    <MTimelineItem Color="green lighten-1"
                     FillDot
                     Right>
        <MCard>
            <MCardTitle Class="green lighten-1">
                <MIcon Class="mr-4"
                        Dark
                        Size="42">
                    mdi-phone-in-talk
                </MIcon>
                <h2 class="text-h4 white--text font-weight-light">
                    Title 5
                </h2>
            </MCardTitle>
            <MContainer>
                <MRow>
                    <MCol>
                        Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
                    </MCol>
                </MRow>
            </MContainer>
        </MCard>
    </MTimelineItem>
</MTimeline>